<template>
  <wd-popup
    :model-value="show"
    custom-style="display:flex;align-items:stretch;padding-top:80rpx;height:70vh;border-radius: 16rpx 16rpx 0 0"
    safe-area-inset-bottom
    position="bottom"
    transition="slide-up"
    @update:model-value="$emit('update:show', $event)"
  >
    <view
      class="close-button"
      @click="$emit('update:show', false)"
    >
      <wd-icon
        name="close"
        size="36rpx"
        color="#333333"
      />
    </view>
    <scroll-view
      scroll-y
      class="first-category"
    >
      <view
        v-for="category in categoryList"
        :key="category.id"
        class="category-item"
        :class="{ active: category.id === selectedCategory?.id }"
        @click="selectCategory(category)"
      >
        {{ category.name }}
      </view>
    </scroll-view>
    <scroll-view
      scroll-y
      class="category-list"
    >
      <template v-if="selectedCategory?.children">
        <view
          v-for="second in selectedCategory.children"
          :key="second.id"
          class="second-category"
        >
          <view class="header">
            <view class="header-name">
              {{ second.name }}
            </view>
            <view
              v-if="
                second.children &&
                  second.children.length > 6 &&
                  !expandedList.includes(second.id)
              "
              class="header-more-button"
              @click="expandHandle(second.id)"
            >
              <view class="button-text">
                更多
              </view>
              <wd-icon
                name="arrow-right"
                size="16rpx"
                color="#999999"
              />
            </view>
          </view>
          <view class="container">
            <template v-if="expandedList.includes(second.id)">
              <view
                v-for="third in second?.children"
                :key="third.id"
                class="category-item"
              >
                <v-image
                  height="143rpx"
                  width="143rpx"
                  border-radius="16rpx"
                  :src="third.image"
                  mode="aspectFill"
                />
                <view class="category-name">
                  {{ third.name }}
                </view>
              </view>
            </template>
            <template v-else>
              <view
                v-for="third in second?.children?.slice?.(0, 6)"
                :key="third.id"
                class="category-item"
                @click="$emit('select', [selectedCategory, second, third])"
              >
                <v-image
                  height="143rpx"
                  width="143rpx"
                  border-radius="16rpx"
                  :src="third.image"
                  mode="aspectFill"
                />
                <view class="category-name">
                  {{ third.name }}
                </view>
              </view>
            </template>
          </view>
        </view>
      </template>
    </scroll-view>
  </wd-popup>
</template>

<script setup lang="ts">
const props = defineProps<{
  show: boolean;
}>();

defineEmits<{
  'update:show': [val: boolean];
  select: [path: CategoryVO[]];
}>();

const categoryList = ref<CategoryVO[]>([]);
const getCategory = async () => {
  const response = await $api.getCategoryAll();
  switch (response.__error) {
    case undefined:
      categoryList.value = response.data.list;
      unwatch();
      break;
  }

  if (categoryList.value[0]) {
    selectCategory(categoryList.value[0]);
  }
};
const unwatch = watch(
  () => props.show,
  (val) => {
    if (!categoryList.value?.length && val) {
      getCategory();
    }
  }
);

const selectedCategory = ref<CategoryVO>();
const selectCategory = (category: CategoryVO) => {
  expandedList.value = [];
  selectedCategory.value = category;
};

const expandedList = ref<string[]>([]);
const expandHandle = (id: string) => {
  expandedList.value.push(id);
};
</script>

<style lang="scss" scoped>
.close-button {
  position: absolute;
  top: 36rpx;
  right: 36rpx;
  z-index: 1;
}

.first-category {
  width: 176rpx;
  background-color: #f5f6fa;
  .category-item {
    position: relative;
    padding: 0 10rpx 0 24rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    &.active {
      background-color: #ffffff;
      color: #ff2f3b;
      &::before {
        content: '';
        position: absolute;
        left: 16rpx;
        top: 50%;
        transform: translateY(-50%);
        height: 20rpx;
        width: 8rpx;
        background-color: #ff2f3b;
        border-radius: 4rpx;
      }
    }
  }
}
.category-list {
  flex: 1;
  min-width: 0;
  padding: 0 26rpx;
  .second-category {
    margin-bottom: 20rpx;
    .header {
      padding: 10rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .header-name {
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
        text-align: center;
      }
      .header-more-button {
        display: flex;
        align-items: center;
        gap: 10rpx;
        .button-text {
          color: #999999;
          font-size: 24rpx;
        }
      }
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx 30rpx;
      .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 150rpx;
        .category-name {
          margin-top: 16rpx;
          font-size: 24rpx;
          color: #666666;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          word-break: break-all;
          text-align: center;
          max-width: 150rpx;
        }
      }
    }
  }
}
</style>
